import React, { useEffect } from 'react';
import { connect, ConnectedProps } from 'react-redux';

import { RootState } from 'src/app/rootReducer';
import { Navbar, BodyContainer, Player } from 'src/components';
import { epicActions as searchEpics } from 'src/redux/search';
import { watchVideoSelector } from 'src/redux/watch';

const Web: React.FC<ReduxProps> = ({ watchVideo, gotoHome }) => {
  useEffect(() => {
    if (!watchVideo) gotoHome();
  }, [gotoHome, watchVideo]);

  return (
    <React.Fragment>
      <Navbar needSource={false} />
      <BodyContainer>
        <Player {...watchVideo!} />
      </BodyContainer>
    </React.Fragment>
  );
};

const connector = connect(
  (state: RootState) => ({
    watchVideo: watchVideoSelector(state),
  }),
  {
    gotoHome: searchEpics.gotoHome,
  },
);

type ReduxProps = ConnectedProps<typeof connector>;
export const WebPlay = connector(Web);
